
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的工具门户</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6b46c1 100%);
            background-size: 200% 200%;
            animation: gradient 15s ease infinite;
        }
        @keyframes gradient {
            0% {background-position: 0% 50%;}
            50% {background-position: 100% 50%;}
            100% {background-position: 0% 50%;}
        }
        .tool-btn {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .tool-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .search-box {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body class="gradient-bg min-h-screen text-white">
    <div class="container mx-auto px-4 py-12">
        <header class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">在线工具门户</h1>
            <p class="text-xl opacity-90">一站式访问常用在线工具</p>
        </header>

        <div class="max-w-3xl mx-auto mb-16">
            <div class="search-box p-1 rounded-full mb-4">
                <div class="flex items-center bg-white bg-opacity-20 rounded-full p-2">
                    <select id="engine-select" class="bg-transparent text-white border-none outline-none px-4 py-2 rounded-l-full">
                        <option value="baidu">百度</option>
                        <option value="bing">必应</option>
                        <option value="360">360搜索</option>
                    </select>
                    <input id="search-input" type="text" class="flex-grow bg-transparent text-white placeholder-white placeholder-opacity-70 px-4 py-2 outline-none" placeholder="输入搜索内容...">
                    <button id="search-btn" class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white px-6 py-2 rounded-r-full transition">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
            <button class="tool-btn bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg p-6 text-center" onclick="window.open('./jsontools/jsontools.html')">
                <i class="fas fa-home text-3xl mb-3"></i>
                <div class="font-semibold">Json格式化</div>
            </button>

            <button class="tool-btn bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-lg p-6 text-center" onclick="window.open('./todo/index.html')">
                <i class="fas fa-book text-3xl mb-3"></i>
                <div class="font-semibold">待办列表</div>
            </button>
            <button class="tool-btn bg-gradient-to-r from-red-500 to-red-600 rounded-lg p-6 text-center" onclick="window.open('./markdowntools/markdowntools.html')">
                <i class="fas fa-users text-3xl mb-3"></i>
                <div class="font-semibold">MarkDown</div>
            </button>
            <button class="tool-btn bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-lg p-6 text-center" onclick="window.open('./worktime/index.html')">
                <i class="fas fa-file-word text-3xl mb-3"></i>
                <div class="font-semibold">工时记录</div>
            </button>
            <button class="tool-btn bg-gradient-to-r from-pink-500 to-pink-600 rounded-lg p-6 text-center" onclick="window.open('./gpu-npu-index/gpu-npu-index.html')">
                <i class="fas fa-paint-brush text-3xl mb-3"></i>
                <div class="font-semibold">算力计算</div>
            </button>
            <button class="tool-btn bg-gradient-to-r from-teal-500 to-teal-600 rounded-lg p-6 text-center" onclick="window.open('./word_counter/word_counter.html')">
                <i class="fas fa-code text-3xl mb-3"></i>
                <div class="font-semibold">文字统计</div>
            </button>
            <button class="tool-btn bg-gradient-to-r from-orange-500 to-orange-600 rounded-lg p-6 text-center" onclick="window.open('./url_encoder_decoder/url_encoder_decoder.html')">
                <i class="fas fa-file-pdf text-3xl mb-3"></i>
                <div class="font-semibold">URL转码</div>
            </button>
            <button class="tool-btn bg-gradient-to-r from-gray-500 to-gray-600 rounded-lg p-6 text-center" onclick="window.open('./text-compare/text-compare.html')">
                <i class="fas fa-project-diagram text-3xl mb-3"></i>
                <div class="font-semibold">文本对比</div>
            </button>
			            <button class="tool-btn bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg p-6 text-center" onclick="window.open('./calculator/calculator.html')">
                <i class="fas fa-language text-3xl mb-3"></i>
                <div class="font-semibold">计算器</div>
            </button>
            <button class="tool-btn bg-gradient-to-r from-green-500 to-green-600 rounded-lg p-6 text-center" onclick="window.open('./genPwd/genPwd.html')">
                <i class="fas fa-map-marked-alt text-3xl mb-3"></i>
                <div class="font-semibold">密码生成</div>
            </button>
        </div>

        <footer class="text-center mt-16 opacity-80">
            <p>© 2025 我的工具门户 | from ai gen html</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchBtn = document.getElementById('search-btn');
            const searchInput = document.getElementById('search-input');
            const engineSelect = document.getElementById('engine-select');
            
            searchBtn.addEventListener('click', function() {
                performSearch();
            });
            
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });
            
            function performSearch() {
                const query = searchInput.value.trim();
                if (query) {
                    let searchUrl;
                    switch(engineSelect.value) {
                        case 'baidu':
                            searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(query)}`;
                            break;
                        case 'bing':
                            searchUrl = `https://www.bing.com/search?q=${encodeURIComponent(query)}`;
                            break;
                        case '360':
                            searchUrl = `https://www.so.com/s?q=${encodeURIComponent(query)}`;
                            break;
                    }
                    window.open(searchUrl, '_blank');
                }
            }
        });
    </script>
</body>
</html>
